@import './fonts.less';
@import './normalize.less';
@import './reset.less';
@import './mixins.less';
@import './colors.less';
@import './components.less';

@width-mobile: 960px;
@width-medium-mobile: 620px;
@width-small-mobile: 440px;

* {
  // outline: 1px dashed blue;
}

// Globals
html {
  .ft1();
}

// Screen - Animations
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}
@keyframes spin {
  to {
    transform: rotate(180deg);
  }
}

.app-wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: var(--color-terminal-background);
  display: flex;
  justify-content: center;
  align-items: center;
}

.screen {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  // Screen - Active
  &.is-active {
    pointer-events: all;
    z-index: 2;
    animation: fade-in 0.25s ease-in-out forwards;
  }

  // Screen - Inactive
  &:not(.is-active) {
    pointer-events: none;
    z-index: -1;
    animation: fade-out 0.25s ease-in-out forwards;
  }

  // Screen - Loading
  &.for-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 60px;

    @keyframes blink {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    .loader {
      color: #ffffff;
      animation: blink 1s infinite alternate;
      width: 48px;
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;

      svg {
        width: 100%;
      }
    }

    p {
      margin-top: 30px;
      text-align: center;
    }
  }

  // Screen - Dashboard
  &.for-dashboard {
    display: flex;
    flex-direction: column;

    .main,
    .footer {
      width: 100%;
    }

    .main {
      height: 100%;
      display: flex;

      @media screen and (max-width: @width-mobile) {
        flex-direction: column;
      }
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      padding: 8px 4px;
      height: 40px;

      .left,
      .right {
        height: 100%;
        display: flex;
        align-items: center;
      }

      .left {
        .help {
          &:not(.is-active) {
            display: none;
          }

          @media screen and (max-width: @width-mobile) {
            display: none;
          }
        }

        .search-control {
          display: flex;
          align-items: center;

          &:not(.is-active) {
            display: none;
          }

          span {
            color: var(--color-terminal-accent);
          }

          input {
            height: 100%;
            width: 440px;
            margin-left: 4px;
            border: 0;
            background: transparent;
            color: var(--color-terminal-base);
            caret-color: var(--color-terminal-base);
            outline: 0;
          }

          @media screen and (max-width: @width-mobile) {
            display: none;
          }
        }

        .mobile-controls {
          align-items: center;
          width: 100%;
          height: 100%;
          gap: 26px;
          display: none;

          @media screen and (max-width: @width-mobile) {
            display: flex;
          }

          @media screen and (max-width: @width-medium-mobile) {
            max-width: 420px;
            overflow-x: auto;
          }

          @media screen and (max-width: @width-small-mobile) {
            max-width: 240px;
          }

          button {
            width: 36px;
            height: 100%;
            flex-shrink: 0;

            &.has-icon {
              display: flex;
              justify-content: center;
              align-items: center;

              svg {
                width: 100%;
                height: 100%;
                pointer-events: none;
              }
            }

            &:not(.is-active) {
              display: none;
            }
          }
        }
      }

      .right {
        justify-content: flex-end;
        position: relative;

        .indicator {
          color: var(--color-terminal-base);
          justify-content: center;
          align-items: center;
          height: 100%;
          transition: opacity 0.3s;
          display: none;

          svg {
            height: 20px;
          }

          &.for-loading {
            animation: spin 1s infinite linear;
          }
          &.for-disconnected {
            color: var(--color-terminal-warning);
          }
          &.for-connected,
          &.for-communication-target {
            color: var(--color-terminal-accent-alternative);
            button {
              color: var(--color-terminal-accent-alternative);
              &:hover {
                color: var(--color-terminal-accent);
              }
            }
          }
          &.for-communication-target {
            margin-right: 8px;

            &.is-active {
              @media screen and (max-width: @width-mobile) {
                display: none;
              }
            }
          }
          &.is-active {
            display: flex;
          }
        }
      }
    }

    // Layouts
    // &[data-layout='default'] {
    .main {
      column-gap: 16px;
      padding-left: 4px; // Account for the tabs borders
      padding-right: 16px + 4px; // Account for the tabs borders
      padding-top: 18px; // Account for the first tabs' title + borders

      @width-left: 34%;
      @width-right: 66%;

      @media screen and (max-width: @width-mobile) {
        padding-right: 6px;
        row-gap: 24px;
      }

      .left,
      .right {
        // width: 50%;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;

        .tab {
          width: 100%;
          height: 100%;
        }
      }

      .left {
        width: @width-left;
        row-gap: 28px;

        @media screen and (max-width: @width-mobile) {
          width: 100%;
          height: ~'calc(50% - 12px)';
        }

        .tab {
          .tab-content {
            height: 0; // Trick to make overflow:auto work without setting a defined height
            min-height: 100%;

            .row {
              gap: 24px;
            }
          }

          &.for-containers,
          &.for-stacks {
            .cell {
              &[data-value='exited'] {
                color: var(--color-terminal-cell-failure);

                + .cell {
                  color: var(--color-terminal-cell-failure);
                }
              }
              &[data-value='running'] {
                color: var(--color-terminal-cell-success);
              }
              &[data-value='paused'] {
                color: var(--color-terminal-cell-paused);
              }
            }
          }

          &.for-images {
            .cell {
              &[data-value='unknown'] {
                color: var(--color-terminal-cell-paused);
              }
              &[data-value='unused'] {
                color: var(--color-terminal-cell-failure);
              }
              &[data-value='used'] {
                color: var(--color-terminal-cell-success);
              }
            }
          }
        }
      }
      // Inspector part
      .right {
        width: @width-right;

        @media screen and (max-width: @width-mobile) {
          width: 100%;
          height: ~'calc(50% - 12px)';
        }

        .tab {
          .tab-content {
            height: 0; // Trick to make overflow:auto work without setting a defined height
            min-height: 100%;
            overflow: auto;

            .row:not(:has(.sub-row)) {
              gap: 24px;

              &.sub-row {
                gap: 8px;
                &:has(.sub-row) {
                  gap: 0;
                }
              }
            }
            .row:not(:has(.sub-row)).is-json {
              gap: 8px;
            }
          }
        }

        [data-tab='Logs'] {
          .tab-content {
            display: grid;
            grid-auto-rows: 30px;
          }

          .row.is-textual {
            white-space: nowrap;
            line-height: 185%;
            min-width: unset;
          }

          &.no-wrap {
            .tab-content {
              display: flex;
            }
            .row.is-textual {
              white-space: wrap;
            }
          }

          &.stripped-background {
            .row.is-textual {
              &:nth-child(2n + 1) {
                background: var(--color-terminal-log-row-alternative);
              }
            }
          }
        }

        [data-tab='Services'] .tab-content .cell {
          &[data-value='exited'] {
            color: var(--color-terminal-cell-failure);

            + .cell {
              color: var(--color-terminal-cell-failure);
            }
          }
          &[data-value='running'] {
            color: var(--color-terminal-cell-success);
          }
          &[data-value='paused'] {
            color: var(--color-terminal-cell-paused);
          }
        }
      }
    }

    &[data-layout='half'] {
      .main {
        .left,
        .right {
          width: 50%;
        }
      }
    }

    &[data-layout='focus'] {
      .main {
        .left,
        .right {
          width: 50%;
        }

        .left .tab:not(.is-current) {
          display: none;
        }
      }
    }

    @media screen and (max-width: @width-mobile) {
      // Copied from data-layout='focus'
      .left .tab:not(.is-current) {
        display: none;
      }
    }

    // States
    &.is-loading {
      .footer {
        .right {
          .indicator.for-loading {
            opacity: 1;
          }
        }
      }
    }
  }
}

// Popup
.popup-layer {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9;
  display: none;

  &.is-active {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .popup {
    width: 55vw;
    background: var(--color-terminal-background);

    &[data-type='error'] .tab-content .row.is-textual p {
      color: var(--color-terminal-danger);
    }

    &.for-menu .tab-content {
      overflow: auto;
    }

    &.for-tty {
      width: 90%;
      height: 80%;

      .tab-content {
        justify-content: flex-start;
        height: 100%;
        overflow: auto;

        input {
          border: 0;
          background: transparent;
          color: var(--color-terminal-base);
          caret-color: var(--color-terminal-base);
          outline: 0;
          margin-left: 8px;
          width: 90%;
        }
      }
    }

    &.for-prompt {
      &.for-login {
        width: 435px;
      }

      .tab-content {
        justify-content: flex-start;
        overflow: auto;

        input {
          border: 0;
          background: transparent;
          color: var(--color-terminal-base);
          caret-color: var(--color-terminal-base);
          outline: 0;
          margin-left: 8px;
          width: 90%;
        }

        textarea {
          border: 0;
          background: rgba(0, 0, 0, 0);
          color: rgba(0, 0, 0, 0);
          caret-color: var(--color-terminal-base);
          outline: 0;
          width: 98%;
          resize: none;
          height: 600px;
          z-index: 2;
          line-height: 135%;
          font-family: monospace;
          font-size: 1em;
          overflow: auto;
          white-space: pre;
        }

        pre {
          position: absolute;
          left: 4px;
          top: 14px;
          z-index: 1;
          pointer-events: none;
          width: 98%;
          overflow: auto;
          height: 610px;
          white-space: pre;

          code {
            color: var(--color-terminal-base);
          }
        }

        &:has(textarea) {
          position: relative;

          .row {
            padding-top: 8px;
            justify-content: center;
          }
          .cell {
            position: absolute;
            opacity: 0.25;
            pointer-events: none;
          }
        }
      }
    }

    &.for-jump {
      width: 630px;

      @media screen and (max-width: @width-mobile) {
        width: 95%;
      }

      .tab-content {
        .jump-input-wrapper {
          padding-left: 8px;

          input {
            border: 0;
            background: transparent;
            color: var(--color-terminal-base);
            caret-color: var(--color-terminal-base);
            outline: 0;
            width: 90%;
          }
        }

        .jump-results {
          padding-left: 8px;
          margin-top: 8px;
          max-height: 185px;
          overflow: auto;

          .no-result-message {
            color: var(--color-terminal-warning);
          }

          .jump-result {
            padding-left: 0;

            // Host
            span.for-host {
              color: var(--color-terminal-accent-alternative);
              margin-right: 4px;
            }

            // Tab
            span.for-tab {
              color: var(--color-terminal-accent);
              margin-right: 4px;
            }

            // Resource name
            span.for-resource {
              margin-left: 4px;
            }

            span {
              pointer-events: none;
            }
          }
        }
      }
    }

    &.for-message[data-category='authentication'] {
      width: 435px;
    }

    &.for-help {
      .tab-content {
        max-height: 630px;
      }
    }

    &.for-overview {
      @row-height: 96px;

      width: 860px;

      @media screen and (max-width: @width-mobile) {
        width: 95%;
      }

      .tab-content {
        max-height: calc(5 * @row-height);
        overflow: auto;
      }

      .row {
        height: @row-height;
        display: flex;
        align-items: center;
        padding-left: 16px;

        > * {
          pointer-events: none;
        }

        .row-logo {
          width: 48px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;

          svg {
            width: 100%;
          }
        }

        .row-content {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          padding-left: 16px;
          padding-right: 24px;
          flex-grow: 1;
          height: 100%;
          justify-content: center;
          gap: 12px;

          .row-summary {
            display: flex;
            align-items: center;
            width: 100%;

            p {
              display: flex;
              width: 100%;

              i {
                color: var(--color-terminal-accent-alternative);
                font-style: normal;
                margin-right: 8px;
              }

              em {
                color: var(--color-terminal-accent-alternative);
                margin-left: auto;
              }

              @media screen and (max-width: @width-medium-mobile) {
                flex-direction: column;
                gap: 12px;

                i {
                  display: contents;
                }
                em {
                  margin: unset;
                }
              }
            }
          }

          .row-information {
            display: flex;
            align-items: center;
            width: 100%;
            gap: 16px;

            @media screen and (max-width: @width-medium-mobile) {
              display: none;
            }

            .row-information-box {
              display: flex;
              align-items: center;
              gap: 4px;

              @media screen and (max-width: @width-mobile) {
                &.for-networks,
                &.for-volumes {
                  display: none;
                }
              }
            }

            .row-information-box svg {
              width: 18px;
            }

            .row-information-box span {
              font-size: 10.5pt;
            }
          }

          .row-information-specs {
            margin-left: auto;
            display: flex;
            gap: 18px;

            @media screen and (max-width: @width-medium-mobile) {
              display: none;
            }
          }

          .row-filler {
            margin-left: auto;
          }
        }
      }
    }

    @media screen and (max-width: @width-mobile) {
      width: 90%;
      &.for-message[data-category='authentication'],
      &.for-tty,
      &.for-prompt.for-login {
        width: 90%;
      }
    }
  }

  @media screen and (max-width: @width-mobile) {
    height: ~'calc(100% - 78px)';
  }
}

*.has-accent {
  color: var(--color-terminal-accent) !important;
}

pre code.hljs {
  background: var(--color-terminal-background);
  line-height: 135%;

  .hljs-attr {
    color: var(--color-terminal-accent-alternative);
  }
  .hljs-bullet {
    color: var(--color-terminal-accent);
  }
  .hljs-string,
  .hljs-number {
    color: var(--color-terminal-base);
  }
}
